<template>
	<view class="page_view">
		<u-navbar title="每日签到":autoBack="true" :safeAreaInsetTop="true"  bgColor='transparent'  :fixed="true" ></u-navbar>
		<view @click="seeshuoming" class="shuoming flex1">
			<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/shuoming.png" class="shuoming_icon" mode=""></image>
			<view class="shuoming_text">
				玩法说明
			</view>
		</view>
		<view class="top_view" style="background: url('https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/qiandao_bg.png') center center no-repeat; background-size: 100% 100%;">
			<view class="top_view_top">
				<text class="top_view_top_num">{{jifen}}</text>积分
			</view>
			<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/qiandao_img.png" class="top_view_img" mode=""></image>
			<view v-if="week_list[week-1].checkin==0" class="top_view_btn" @click="qdclick" style="background: url('https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/qiandao_btn.png') center center no-repeat; background-size: 100% 100%;">
				立即签到
			</view>
			<view v-else class="top_view_btn" style="opacity: .3;background: url('https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/qiandao_btn.png') center center no-repeat; background-size: 100% 100%;">
				立即签到
			</view>
			<view class="top_view_desc">
				已连续签到 <text class="top_view_desc_num">{{lianxu}}</text>(天)
			</view>
		</view>
		<view class="jifen_list flex">
			<view class="jifen_list_item" v-for="(item,index) in week_list">
				<view class="jifen_list_item_top">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/qiandao_active.png"  class="jifen_list_item_top_qiandao_top" mode="" v-if="item.checkin!=0"></image>
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/qiandao_no_active.png"  class="jifen_list_item_top_qiandao_top" mode="" v-else></image>
					<view class="jifen_list_item_num">
						{{item.score}}
					</view>
				</view>
				<!-- 'jifen_list_item_bottom1' -->
				<view :class="[(index+1) < week?'jifen_list_item_bottom1':(index+1) == week?'jifen_list_item_bottom2':'jifen_list_item_bottom']">
					{{item.checkin!=0?'已签':(index+1) == week?'今天': item.week}}
				</view>
			</view>
		</view>
		<view class="jifen_tiao"></view>
		<view class="jifen_tangdou">
			<view class="jifen_tangdou_left flex1">
				<view class="jifen_tangdou_left_tiao"></view>
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/tangdou.png" class="jifen_tangdou_tangdou" mode=""></image>
				<view class="jifen_tangdou_left_tiao"></view>
			</view>
			<view class="jifen_tangdou_min">
				签到记录
			</view>
			<view class="jifen_tangdou_left flex1">
				<view class="jifen_tangdou_left_tiao"></view>
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/tangdou.png" class="jifen_tangdou_tangdou" mode=""></image>
				<view class="jifen_tangdou_left_tiao"></view>
			</view>
		</view>
		<scroll-view scroll-y="true" class="scroll">
			<view class="list">
				<view class="list_item" v-for="(item,index) in qdList" :key="index">
					<view class="list_item_top flex">
						<view class="list_item_top_left">
							日常签到
						</view>
						<view class="list_item_top_right">
							+{{item.score}}
						</view>
					</view>
					<view class="list_item_bottom">
						{{item.created_at}}
					</view>
				</view>
			</view>
		</scroll-view>
		<u-popup :show="tc_show" @close="close" mode="center" round="20">
			<view class="tc">
				<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/qiandao_img.png" class="tc_img" mode=""></image>
				<view class="tc_top"></view>
				<view class="tc_desc">
					<view class="tc_desc_top">
						已连续签到{{lianxu+1}}天
					</view>
					<view class="tc_desc_bottom flex1">
						<text style="font-size: 48rpx; font-weight: 800;">+</text>
						<text>{{jifen2}}</text>
						 <text style="font-size: 36rpx;">（积分）</text>
					</view>
				</view>
				<view class="tc_btn" @click="lingqu">
					领取
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { checkin, calendar, handle, checkInfo } from '@/api/common.js';
	import getScrollHeight from "@/utils/utils.js"
	var week = new Date().getDay()
	if(week == 0){
		week = 7
	}
	export default {
		data() {
			return {
				jifen: 0,
				jifen2:0,
				lianxu: 0,
				qdList:[],
				week: week,
				scrollH:'',
				tc_show:false,
				jifen:50,
				week_list:[]
			}
		},
		onLoad() {
			console.log(this.week)
		},
		onReady() {
			let t = this
			getScrollHeight.getScrollHeight('list').then(res=>{
				t.scrollH = res-10
			})	
		},
		mounted() {
			this.getList();
			this.getCalendar();
			this.check();
		},
		methods: {
			seeshuoming(){
				uni.navigateTo({
					url:'/subPages/shuoming'
				})
			},
			check(){
				checkInfo().then(res=>{
					if(res.code == 200001){
						this.lianxu = res.data.days;
						this.jifen = res.data.score;
					}
				})
			},
			getList(){
				checkin().then(res=>{
					if(res.code == 200001){
						this.qdList = res.data.data;
					}
				})
			},
			getCalendar(){
				calendar().then(res=>{
					if(res.code == 200001){
						this.week_list = res.data;
					}
				})
			},
			qdclick(){
				handle().then(res=>{
					if(res.code == 200001){
						this.jifen2 = res.data.score;
						this.tc_show = true;
						this.getList();
						this.getCalendar();
						this.check();
					}else{
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			close(){
				this.tc_show = false
			},
			lingqu(){
				this.tc_show = false
			}
		}
	}
</script>

<style>
	page{
		background: linear-gradient(180deg, rgba(244, 248, 251, 0.00) 0%, #F4F8FB 28.65%, #F4F8FB 100%);
	}
.page_view{
	width: 100%;
}
.top_view{
	width: 100%;
	height: 886rpx;
	/* background: url(https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/qiandao_bg.png) center center no-repeat;
	background-size: 100% 100%; */
	
}
.top_view_top{
	color: #141414;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 32rpx;
	font-weight: 400;
	padding-top: 180rpx;
	text-align: center;
}
.top_view_top_num{
	color: #141414;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 70rpx;
	font-weight: 800;
}
.shuoming{
	width: 162rpx;
	height: 60rpx;
	border-radius: 41rpx 0rpx 0rpx 41rpx;
	background: rgba(255, 255, 255, 0.40);
	position: fixed;
	top: 194rpx;
	right: 0;
	padding: 12rpx 16rpx;
	box-sizing: border-box;
}
.shuoming_icon{
	width: 26rpx;
	height: 26rpx;
}
.shuoming_text{
	color: #0165FB;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	margin-left: 6rpx;
}
.top_view_img{
	width: 264rpx;
	height: 264rpx;
	display: block;
	margin: 0 auto;
	margin-top: 46rpx;
}
.top_view_btn{
	width: 300rpx;
	height: 120rpx;
	text-align: center;
	line-height: 97rpx;
	color: #FFF;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 34rpx;
	font-weight: 600;
	/* background: url(https://bucketoss10086.oss-cn-beijing.aliyuncs.com/images/qiandao_btn.png) center center no-repeat;
	background-repeat: no-repeat;
	background-size: 100% 100%; */
	margin: 0 auto;
	margin-top: 60rpx;
}

.top_view_desc{
	color: #141414;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	text-align: center;
	margin-top: 40rpx;
}
.top_view_desc_num{
	color: #FFB11C;
	font-size: 28rpx;
	margin: 0 10rpx;
}
.jifen_list{
	width: 100%;
	padding: 0 22rpx;
	box-sizing: border-box;
}
.jifen_list_item{
	width: 84rpx;
}
.jifen_list_item_bottom{
	width: 84rpx;
	height: 108rpx;
	line-height: 130rpx;
	border-radius: 12rpx;
	background: #FFFCF3;
	box-shadow: 0px 6px 10px 0px #DFECF6;
	margin-top: -34rpx;
	color: #0165FB;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
}
.jifen_list_item_bottom1{
	width: 84rpx;
	height: 108rpx;
	line-height: 130rpx;
	border-radius: 12rpx;
	background: #FFF;
	box-shadow: 0px 6px 10px 0px #DFECF6;
	margin-top: -34rpx;
	color: #BDBDBD;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
}
.jifen_list_item_bottom2{
	width: 84rpx;
	height: 108rpx;
	line-height: 130rpx;
	border-radius: 12rpx;
	background: #FFF;
	box-shadow: 0px 6px 10px 0px #DFECF6;
	margin-top: -34rpx;
	color: #333;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
}
.jifen_list_item_top{
	width: 68rpx;
	height: 68rpx;
	margin: 0 auto;
	position: relative;
}
.jifen_list_item_top_qiandao_top{
	width: 68rpx;
	height: 68rpx;
}
.jifen_list_item_num{
	color: #FFFFFA;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 26rpx;
	font-weight: 400;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.jifen_tiao{
	width: 100%;
	height: 16rpx;
	background: #EEF4F9;
	margin-top: 48rpx;
}
.jifen_tangdou{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 40rpx;
}
.jifen_tangdou_left_tiao{
	width: 58rpx;
	height: 2rpx;
	background: #0165FB;
}
.jifen_tangdou_tangdou{
	width: 28rpx;
	height: 28rpx;
	margin: 0 8rpx;
}
.jifen_tangdou_min{
	color:#0165FB;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 32rpx;
	font-weight: 400;
	margin: 0 20rpx;
	
}
.scroll{
	margin-top: 20rpx;
}
.list{
	width: 100%;
	padding:0 22rpx;
	box-sizing: border-box;
}
.list_item{
	height: 124rpx;
	width: 100%;
	padding:22rpx 0;
	box-sizing: border-box;
	border-bottom: 1rpx solid #EEF4F9;
}
.list_item_top_left{
	color:#141414;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 28rpx;
	font-weight: 400;
}
.list_item_top_right{
	color:#0165FB;
	text-align: right;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 32rpx;
	font-weight: 400;
}
.list_item_bottom{
	color:#818181;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 24rpx;
	font-weight: 400;
	margin-top: 8rpx;
}
.tc{
	width: 540rpx;
	height: 540rpx;
	border-radius: 40rpx;
	background: #FFF;
	position: relative;
	
}
.tc_img{
	width: 264rpx;
	height: 264rpx;
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: -148rpx;
}
.tc_top{
	width: 100%;
	height: 248rpx;
	border-radius: 40rpx 40rpx 0rpx 0rpx;
	background: linear-gradient(180deg, rgba(68, 121, 238, 0.30) 0%, rgba(255, 255, 255, 0.00) 100%);
}
.tc_desc{
	margin-top: -50rpx;
}
.tc_desc_top{
	color: #141414;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 36rpx;
	font-weight: 400;
}
.tc_desc_bottom{
	color: #EB9700;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 68rpx;
	font-weight: 800;
	margin-top: 12rpx;
	justify-content: center;
}
.tc_btn{
	color: #FFF;
	text-align: center;
	font-family: Alibaba PuHuiTi 2.0;
	font-size: 34rpx;
	font-weight: 400;
	width: 460rpx;
	height: 86rpx;
	line-height: 86rpx;
	border-radius: 43rpx;
	background:#0165FB;
	margin: 0 auto;
	margin-top: 42rpx;
}
</style>
